<!--
 * @Author: cl
 * @Description: 
 * @Date: 2022-07-01 08:50:14
 * @LastEditTime: 2023-07-07 11:16:25
 * @FilePath: \vue3\src\views\vue3Study\setupTest.vue
-->
<template>
  <div class="div-column">
    <TitleTitle
      :btnList="btnList"
      :title="title"
      @btnClick="btnClick"
    ></TitleTitle>
    <div>
      {{ fName }}
    </div>
    <el-input v-model="fName" placeholder="输入你爹的名字"></el-input>
    <children-1
      :fName="fName"
      @eat="eatVig"
      @click="clickChild()"
      @hook:mounted="childMounted()"
    ></children-1>
    <children-2
      :fName="fName"
      @eat="eatVig"
      @hook:mounted="childMounted()"
    ></children-2>
    <children-3
      :fName="fName"
      :fAge="18"
      @eat="eatVig"
      ref="mychild"
      @vue:mounted="childMounted()"
    ></children-3>
    <el-button @click="sayHua()">老三说话</el-button>
  </div>
</template>
<script>
import { defineAsyncComponent, reactive } from "vue";
// import Children1 from "./children1.vue";
// import Children2 from "./children2.vue";
import Children3 from "./children3.vue";
import { ElMessage } from "element-plus";
import { ref, toRef } from "vue";
import { onMounted } from "@vue/runtime-core";
export default {
  components: {
    Children1: defineAsyncComponent(() => import("./children1.vue")),
    Children2: defineAsyncComponent(() => import("./children2.vue")),
    Children3,
  },
  setup() {
    let btnList = [
      {
        name: "按钮1",
        tag: "btn1",
        hasPermission: 0,
      },
      {
        name: "按钮2",
        tag: "btn2",
        hasPermission: 1,
      },
      {
        name: "按钮3",
      },
    ];
    let title = ref("父慈子孝");
    let fName = ref("宇智波富岳");

    function speak(speakMsg, option) {
      if (!speakMsg) return;
      const synth = window.speechSynthesis;
      const speakOption = option ? option : new SpeechSynthesisUtterance();
      speakOption.text = speakMsg;
      synth.speak(speakOption);
    }

    function eatVig(name) {
      let str = "There are a number of guides within MDN docs. These articles aim to add additional usage examples, or teach you how to use an API or feature. This page links to some of the most popular material."
      speak(str);
      console.log(`喂${name}吃糖`);
      ElMessage(`喂${name}吃糖`);
    }

    let btnClick = (tag) => {
      console.log(tag);
      ElMessage(`this is a message.${tag}`);
    };
    let clickChild = () => {
      console.log("父组件");
    };
    let mychild = ref();
    let sayHua = () => {
      console.log("1111111111111111");
      console.log(mychild);
      mychild.value.sayBaba();
      console.log("22222222222222222222");
    };
    function childMounted() {
      console.log("父组件接收Mounted");
    }
    onMounted(() => {
      console.log("父组件onMounted");
    });
    return {
      fName,
      eatVig,
      title,
      btnList,
      btnClick,
      clickChild,
      sayHua,
      mychild,
      childMounted,
    };
  },
};
</script>
